<template>
	<el-menu default-active="1-4-1" class="el-menu-vertical-demo"
	 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
	  @open="handleOpen" @close="handleClose" :collapse="isCollapse">
		<div class="logo">{{isCollapse ? '' : '通用后台管理系统' }}</div>
		<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
				<i :class="'el-icon-' + item.icon"></i>
				<span slot="title">{{item.label}}</span>
		</el-menu-item>
	  <el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
		<template slot="title">
		  <i :class="'el-icon-' + item.icon"></i>
		  <span slot="title">{{item.label}}</span>
		</template>
		<el-menu-item-group v-for="(subItem,subIndex) in item.children" :key="subItem.path">
		  <el-menu-item @click="clickMenu(subItem)" :index="subItem.id">{{subItem.label}}</el-menu-item>
		</el-menu-item-group>
	  </el-submenu>
	</el-menu>
</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
	  height:100%;
	  border:none;
	  padding: 0 0px;
  }
 .el-menu-item{
	  height: 40px;
	  line-height: 40px;
	  padding: 0 0px;
  }

  .el-submenu__title{
	  height: 40px;
	  line-height: 40px;
  }
  .el-menu-item-group__title{
	  height: 0px;
	  padding-top: 0px;
  }
  	.el-submenu .el-menu-item {
  		height: 40px;
  		line-height: 40px;
  	}

  .el-menu .logo{
  		  color: #fff;
  		  text-align: center;
  		  line-height: 25px;
  }

</style>

<script>
  export default {
    data() {
      return {
        // isCollapse: false,
		menu:  [],
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
	  clickMenu(item){
		  // alert(JSON.stringify(item))
		  this.$router.push({
			  name: item.name
		  })
		  this.$store.commit('selectMenu', item)
	  },
		ismobile() {
			let flag = navigator.userAgent.match(
			  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
			);
			return flag;
		},
    },
	created() {
		let ism = this.ismobile()
		if(ism){
			this.$store.commit('setCollapse',true)
		}
		else{
			this.$store.commit('setCollapse',false)
		}
		this.menu = JSON.parse(localStorage.getItem("menu"))
	},
	computed:{
		noChildren(){
			return this.asyncMenu.filter(item=>!item.children);
		},
		hasChildren(){
			return this.asyncMenu.filter(item=>item.children);
		},
		isCollapse(){
			let r = this.$store.state.tab.isCollapse;
			return r;
		},
		asyncMenu(){
			this.$store.commit('setMenu', this.menu)  //保存menu
			let showmenu = this.$store.state.tab.menu
			// alert(JSON.stringify(showmenu))
			showmenu = showmenu.filter(item=>item.visible == '0')
			showmenu.forEach(t=>{
				let children = t.children
				if(children!=undefined){
					// alert(JSON.stringify(children))
					children = children.filter(item=>item.visible=='0')
					t.children=children
				}
			})
			
			return showmenu
		}
	}
  }
</script>
